<template>
  <div class="car_area">
    <div class="items_area">
      <div v-for="(item, index) in carList" :key="index" class="item">
        <div style="text-align: center; position: relative">
          <div style="font-size: 18px; font-weight: 600">
            {{ item.cardrace }}
          </div>
          <div>{{ item.types }}</div>
          <el-button
            type="text"
            style="position: absolute; top: 0; right: 15px"
            @click="del(index)"
            ><i class="el-icon-close"></i></el-button
          >
        </div>
        <div style="display: flex;justify-content: space-around">
          <span >原价：{{item.price}}</span>
          <span >现价：{{ item.priceNow }}</span>
        </div>
        <div>
          <el-input-number v-model="item[index]" size="mini" :min="1" :max="item.total_num" style="width: 100%"></el-input-number>
        </div>
      </div>
    </div>
    <div class="button_area">
      <div
        style="
          width: 70px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          border: 1px solid #dcdfe6;
        "
        class="sub"
        @click="setOrder"
      >
        结算
      </div>
      <div style="height: 100%; line-height: 46px">￥ {{isNaN(totalPrice) == true ? '请检查数量' : totalPrice}}</div>
      <div
        style="
          width: 70px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          border: 1px solid #dcdfe6;
        "
        class="cancel"
        @click="empty"
      >
        清空
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "car",
  props: {
    carItem: Array,
  },
  data() {
    return {
      carList: [],
      totalPrice: 0,
    };
  },
  watch: {
    carItem: {
      handler(val) {
        let carlist = val;
        // for (let i = 0 ; i< carlist.length ; i++){
        //   carlist[i].num = 1
        // }
        console.log(carlist);
        this.carList = carlist;
        this.totalPrice = 0;

        for (let i = 0; i < val.length; i++) {
          this.totalPrice += (val[i].priceNow*val[i][i]);
        }
        // console.log(this.totalPrice);
        // console.log(this.carList);
      },
      deep: true,
    },
  },
  methods: {
    del(i) {
      console.log(i);
      this.carItem.splice(i, 1);
      this.carList = this.carItem;
      console.log(this.carList);
    },
    setOrder() {
      var id = window.sessionStorage.getItem('id');
      var user_name = window.sessionStorage.getItem('username')
      if (id == null){
        this.$message.warning('请先登录');
      }else if (user_name !== 'admin'){
        if (this.totalPrice !== 0 && isNaN(this.totalPrice) == false){
          console.log(this.carList)
          this.axios.post('/api/setOrder',{
            carList:[...this.carList],
            id:id,
            order_price:this.totalPrice,
            user_name:user_name
          }).then(res=>{
            console.log(res);
            this.$router.push('/success');
          }).catch(err=>{
            console.log(err)
          })
        }else {
          this.$message.warning('请挑选物品')
        }
      }else {
        this.$message.warning({
          message:'请管理员不要乱操作'
        })
      }
    },
    empty() {
      this.carItem.splice(0, this.carItem.length);
    },
  },
};
</script>

<style scoped>
.car_area {
  width: 100%;
  position: relative;
}
.item {
  border-radius: 5px;
  width: 90%;
  margin: 30px auto 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 3px 2px rgb(0 0 0 / 7%),
    0 -3px 5px rgb(0 0 0 / 7%), 0 -7px 9px rgb(0 0 0 / 7%),
    0 -10px 24px rgb(0 0 0 / 7%), 0 -10px 52px rgb(0 0 0 / 7%);
}
.items_area {
  width: 100%;
  position: absolute;
  height: 92%;
  overflow-y: auto;
}
.button_area {
  width: 100%;
  bottom: 2px;
  height: 7%;
  position: absolute;
  display: flex;
  justify-content: space-around;
}
.button_area > div {
  cursor: pointer;
  border-radius: 5px;
}
.button_area :nth-child(3) {
  color: #ed5a65;
}
.sub:hover {
  color: cornflowerblue;
  transition: 0.5s;
}
.cancel:hover {
  color: red;
  transition: 0.5s;
}
</style>
